<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app" class="registration-container">
    <h2>用户登录</h2>
    <form @submit.prevent="loginUser" class="registration-form">
        <div class="form-group">
            <label for="identifier">邮箱/手机号:</label>
            <input type="text" id="identifier" v-model="formData.identifier" required placeholder="请输入您的邮箱或手机号">
        </div>

        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="formData.password" required placeholder="请输入密码">
        </div>

        <button type="submit" :disabled="!isFormValid">登录</button>

        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
        <p v-if="successMessage" class="success-message">{{ successMessage }}</p>

        <div class="links-container">
            <a href="forgot_password.html" class="link">忘记密码？</a>
            <span class="link-separator">|</span>
            <a href="register.html" class="link">立即注册</a>
        </div>
    </form>

    <div class="social-login-container">
        <p>或使用第三方账号登录:</p>
        <div class="social-buttons">
            <a href="#" @click.prevent="handleSocialLogin('wechat')" class="social-button wechat">
                <i class="fab fa-weixin"></i> 微信登录
            </a>
            <a href="#" @click.prevent="handleSocialLogin('qq')" class="social-button qq">
                <i class="fab fa-qq"></i> QQ登录
            </a>
        </div>
    </div>
</div>

<script src="../js/login.js"></script>
</body>
</html>